<template>
    <div class="bottom-card">
                <el-card shadow="hover">
                    <div class="title">热门搜索</div>
                     <v-chart :option="option" style="width: 100%; height: 213px" ></v-chart>
                </el-card>
            </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'echarts-wordcloud'
import { getkeyWordData } from '@/api/index'

const option = ref({})

const renderChart = (data) => {
  option.value = {
    tooltip: {},
    series: {
      type: 'wordCloud',
      // 要求数据结构[{name: '词1', value: 100}, {name: '词2', value: 100},...]
      data: data,
      width: '100%',
      height: '100%',
      textStyle: {
        color() {
          // 生成随机颜色
          return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
        },
      },
      // 强调高亮效果
      emphasis: {
        focus: 'self',
        textStyle: {
          textShadowBlur: 5,
          textShadowColor: '#333',
        },
      },
    },
  }
}

onMounted(async () => {
  const res = await getkeyWordData()
  // console.log(res)
  const data = res.map((item) => {
    return {
      name: item.keyWord,
      value: item.totalSearch,
    }
  })
  renderChart(data)
})
</script>

<style scoped>
.title{
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
</style>